// 渲染
function render() {
  axios.get('/students')
    .then(({ data: { data } }) => {
      // console.log(data)
      $('.total').html(data.length)
      const newdata = data.map(function ({ age, name, gender, group, hope_salary, salary, province, area, city, id }) {
        gender = gender === 0 ? '男' : '女'
        return ` <tr >
      <td>${name}</td>
      <td>${age}</td>
      <td>${gender}</td>
      <td>${group}</td>
      <td>${hope_salary}</td>
      <td>${salary}</td>
      <td>${province} ${city} ${area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${id}></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${id}></i></a>
      </td>
    </tr>`
      }).join('')
      $('.list').html(newdata)
    })

}
render()
// 删除学生
$('.list').on('click', '.bi-trash', function () {
  const did = $(this).attr('data-id')
  axios.delete(`/students/${did}`)
    .then(res => {
      // console.log(res)
      if (res.status !== 204) {
        return tip(res.statusText)
      }
      $(this).parents('tr').remove()
      tip('删除成功')
      render()
    })
})

// 新增学生
//把省市联动包装成函数，便于复用

function changed (){
  $('[name="province"]').change(function () {
    // console.log( $('[name="province"]').val());
  const   pname = $('[name="province"]').val()
    axios.get(`/api/city`, { params: { pname } })
      .then(({ data: { data } }) => {
      $('[name="city"]').empty()   
      $('[name="city"]').append(`<option value="--城市--">--城市--</option>`)
        // console.log(data);
        $('[name="area"]').empty()
        $('[name="area"]').append(`<option value="--地区--">--地区--</option>`)
        const cselect = data.map(function (item) {
          return `   <option value="${item}">${item}</option>`
        }).join('')
        $('[name="city"]').append(cselect)  
        if($(this).val()===''){       
          $('[name="area"]').empty()
          $('[name="area"]').append(`<option value="--地区--">--地区--</option>`)
         }
      })
    })
    $('[name="city"]').change(function () {
      const cname = $('[name="city"]').val()
      const pname= $('[name="province"]').val()
      axios.get('/api/area', { params: { pname, cname } })
        .then(({ data: { data } }) => {
          // console.log(data);
          $('[name="area"]').empty()
          $('[name="area"]').append(`<option value="--地区--">--地区--</option>`)
          const aselect = data.map(function (item) {
            return `   <option value="${item}">${item}</option>`
          }).join('')
          $('[name="area"]').append(aselect)
     
        })
    })
}
//清空函数
function emptys(){
  $('[name="city"]').empty()   
  $('[name="city"]').append(`<option value="--城市--">--城市--</option>`)
  $('[name="area"]').empty()
  $('[name="area"]').append(`<option value="--地区--">--地区--</option>`)
}
$('#openModal').click(function () {
  $('.modal-title').html('添加学员')
  $('#modal').modal('show')
 emptys()
  axios.get('/api/province')
  .then(({ data: { data } }) => {
    // console.log(data);
    $('[name="province"]').empty()   
    $('[name="province"]').append(`<option value="--省份--">--省份--</option>`)
    const pselect = data.map(function (item) {
      return `   <option value="${item}">${item}</option>`
    }).join('')
    $('[name="province"]').append(pselect)
        changed()
  })
})
$('#modal').on('click',function(e){
// console.log(e.target.className);
if(e.target.className==='btn btn-secondary'||e.target.className==='btn-close'){
  $('#form')[0].reset()
}
})

$('body').on('click','#submit',function(){
const fd = serialize($('#form')[0],{hash:true})
const newgender =$('.form-check-input:checked').val()
fd.gender=newgender
if(fd.province.includes('省份')||fd.city.includes('城市')||fd.area.includes('地区')){
  tip('请选择省市区')
  return
}
const reg=/\d+/
for (let k in fd) {
  if (reg.test(fd[k])) {
    fd[k] =+fd[k]
  }
}
if($('.modal-title').html()==='添加学员'){
  axios.post('/students',fd)
  .then(res => {
    // console.log(res)
    tip('添加成功')
    $('#modal').modal('hide')
    $('#form')[0].reset()
    render()
  }).catch((err) => {
  //  console.log(err.response.status);
   if(err.response.status===422){
    tip('信息格式有误')
  }
  })
}else
if($('.modal-title').html()==='编辑学员'){
axios.put( `/students/${+editid}`,fd) //除了传id，还要穿参数
.then(res => {
  console.log(res)
  tip('修改成功')
  $('#form')[0].reset()
  $('#modal').modal('hide')
  render()
}).catch(err=>{
  console.log(err.response);
}
)
}
})
//修改学生信息
$('.list').on('click', '.bi-pen', function () {
  $('.modal-title').html('编辑学员')
  $('#modal').modal('show')
   emptys()
   editid = $(this).attr('data-id')
  axios.get('/students/'+editid)
  .then(({data:{data}}) => {
    console.log(data)
    data.gender==0?$('#cb01').prop('checked',true):$('#cb02').prop('checked',true)
    
    $.each(data, function(key, value) {
      let input = $('#modal').find(`[name="${key}"]`);
      if(input.attr('type') === 'text') {
        input.val(value);
      }
    });  //jQuery的遍历集合的办法，需要name属性一一对应

      const defaultprovince = data.province
      const defaultcity =data.city
      const defaultarea=data.area
      axios.get('/api/province')
  .then(({ data: { data } }) => {
    // console.log(data);//不能直接用上面的数据，直接引用有bug，比如加了empty上面不行，不加下面又出问题，所以直接包装change函数，下面的重新写，调用change函数就可以达到效果。
    $('[name="province"]').empty()   
    $('[name="province"]').append(`<option value="--省份--">--省份--</option>`)
    const pselect = data.map(function (item) {
      return `   <option value="${item}">${item}</option>`
    }).join('')
   
    $('[name="province"]').append(pselect)
    $('[name="province"]').val(defaultprovince)
  })
      axios.get(`/api/city`, { params: { pname:defaultprovince } })
        .then(({ data: { data } }) => {
          const cselect = data.map(function (item) {
            return `   <option value="${item}">${item}</option>`
          }).join('')
          $('[name="city"]').append(cselect)
          $('[name="city"]').val(defaultcity)
        })
        axios.get('/api/area', { params: { pname:defaultprovince, cname:defaultcity } })
        .then(({ data: { data } }) => {
          // console.log(data);
          const aselect = data.map(function (item) {
            return `   <option value="${item}">${item}</option>`
          }).join('')
          // console.log(aselect);
          $('[name="area"]').append(aselect)
          $('[name="area"]').val(defaultarea)
        })
        changed()
  })
  
})




